import React, { useEffect, useRef } from 'react';
import fullscreen from '@/utils/fullscreen';

export default (props) => {
  const videoRef = useRef();
  const onFullscreenChanged = (event) => {
    if (event.target === videoRef.current) {
      if (fullscreen.isFullscreen) {
        console.log('进入全屏');
        event.target.muted = false;
        event.target.volume = 0.5;
      } else {
        console.log('退出全屏');
        event.target.muted = true;
      }
    }
  };
  useEffect(() => {
    fullscreen.addEventListener(onFullscreenChanged);
    return () => {
      fullscreen.removeEventListener(onFullscreenChanged);
    };
  }, []);
  return (
    <video
      ref={videoRef}
      {...props}
      onDoubleClick={(e) => {
        const vid = e.target;
        fullscreen.request(vid);
      }}
    />
  );
};
